<template>
  <view>
    <view class="my_input_top">
      <uni-search-bar :focus="false" class="uni-mt-10" radius="40" clearButton="auto" cancelButton="none"
        bgColor="#383838" v-model="value_" type="search" @confirm="enterEvent" @input="getkeylist"></uni-search-bar>
    </view>
    
    <view v-if="album_image!=''" class="search_ablum" :id="album_mid">
      <image :src="album_image" mode=""></image>
      <view class="search_ablum-right">
        <text>专辑</text>
        <text>{{album_name}}</text>
        <text>{{album_author}}</text>
      </view>
    </view>
    
    <view style="text-align: left;width: 80%;font-weight:bold;margin: 30rpx 0 30rpx 5%;" class="">
      <text style="font-size: 32rpx;color: white;margin-left: 20rpx;">单曲</text>
    </view>
    
    <view @click="searchWord(item.mid,item.name,item.singer)" class="my_input_list" v-for="item,index in arr" :key="index">
      <view :id='item.mid'>
        <!-- <image src="../../static/my/search.png" mode=""></image> -->
        <text space="ensp">{{{"keyword":value_,"name":item.name}|trueKey}}</text>
        <text space="ensp">{{{"keyword":value_,"name":item.name}|falseKey}}</text>
      </view>
      <view class="">
        <text space="ensp">{{item.singer}}</text>
      </view>
    </view>
    
    <music></music>
    
  </view>
</template>

<script>
  
  export default {
    data() {
      return {
        search: false,
        value_: "",
        http: "",
        arr: [],
        album_image:'',
        album_name:'',
        album_author:'',
        album_mid:'',
      };
    },
    onLoad(e) {
      this.value_=e.key
    },

    methods: {
      startTouch(e) { //@touchstart 触摸开始
        this.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标         
        this.clientY = e.changedTouches[0].clientY; //手指按下时的Y坐标
      },
      endTouch(e) { //@touchend触摸结束
        //在事件结束时，左右滑動退出搜索状态
        if ((this.clientX - e.changedTouches[0].clientX) > 100) {
          console.log("my 左")
          uni.navigateTo({
            url: "/pages/index/index"
          })
        } else if ((e.changedTouches[0].clientX - this.clientX) > 100) {
          console.log("my 右")
          uni.navigateTo({
            url: "/pages/index/index"
          })
        }
      },

      //搜索结果
      enterEvent(e) {
        this.value_ = e.detail.value
      },
      
      getkeylist(e) {
        clearInterval(this.http)
        this.value_ = e
        if (this.value_ == "") {
          this.arr = []
          return
        } else {
          this.http = setInterval(async () => {
            uni.showLoading({
                title: '搜索歌曲加载中...'
            })
            let {
              data: {
                data
              }
            } = await uni.$http.get("search/quick?key=" + e)
              
            if(data.album.itemlist==""){
              this.$store.commit("setSong_imgurl","/static/my/music-icon.png")
              this.album_image=this.$store.state.song_imgurl
              this.album_name="暂无专辑"
              this.album_author="暂无"
              this.album_mid=""
              this.arr = ""
            }else {
              console.log(data)
              this.album_image=data.album.itemlist[0].pic
              this.album_name=data.album.itemlist[0].name
              this.album_author=data.album.itemlist[0].singer
              this.album_mid=data.album.itemlist[0].mid
              this.arr = data.song.itemlist
            }
            uni.hideLoading()
            clearInterval(this.http)
          }, 800)
        }
      },

      //点击播放歌曲
      searchWord(id,name,singer) {
        //调用全局方法
        this.$clickPlayMusic(id,name,singer)
      }
      
    },

    filters: {
      trueKey(e1) {
        let e = e1.name
        let value = (e.trim()).toLowerCase().replace(" ", "、").split('')
        let value2 = (e1.keyword.trim()).toLowerCase().replace(" ", "、").split('')
        let result = []
        let name_null = 0
        let null_index = 0
        let lh
        for (let i = 0; i <= value.length - 1; i++) {
          if (value[i] == value2[i]) {
            result.push(value[i])
          } else if (value[i] == '、') {
            null_index == i
            name_null++
          }
        }
        result = (result.join("")).replace(",", "")
        if (result.length == 1) {
          name_null = 1
        } else if (result.length > 1) {
          name_null = result.length
        } else {
          name_null = 0
        }
        return e.substr(0, name_null)
      },

      falseKey(e1) {
        let e = e1.name
        let value = (e.trim()).toLowerCase().replace(" ", "、").split('')
        let value2 = (e1.keyword.trim()).toLowerCase().replace(" ", "、").split('')
        let result = []
        let last_index = 0
        let last_length = 0
        let null_index = 0
        let lh
        for (let i = 0; i <= value.length - 1; i++) {
          if (value[i] != value2[i]) {
            result.push(value[i])
          } else if (value[i] == value2[i]) {
            last_index++
          }
        }
        result = (result.join("")).replace(",", "").replace("、", " ")
        if (last_index == 1) {
          last_index = 1
        } else if (last_index > 1) {
          last_index
        } else {
          last_index = 0
        }

        if (result.length == 1) {
          last_length = 1
        } else if (result.length > 1) {
          last_length = result.length
        } else {
          last_length = 0
        }
        return e.substr(last_index, last_length)
      },

    },
    onUnload() { //监听离开页面，进入别的页面
      console.log("离开search页面")
      uni.switchTab({
        url: "/pages/index/index"
      })
    }

  }
</script>

<style lang="scss">
  
  .my_input_top {
    position: relative;
    margin: 0 0 10rpx 0;
    width: 100%;
    background-color: #2c2c2c;


    >.uni-mt-10 {
      /*光标颜色*/
      caret-color: #25FCB9;

      /deep/ .uni-searchbar__box {
        justify-content: left;

        .uni-searchbar__box-icon-search {
          padding-left: 30rpx;
        }

        .uni-searchbar__box-search-input {
          color: white;
        }
      }
    }
}
  .search_ablum {
    background-color: #282828;
    height: 100rpx;
    padding: 20rpx;
    border-radius: 20rpx;
    margin: 4%  auto;
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    > image {
      width: 120rpx;
      height: 110rpx;
    }
    .search_ablum-right {
      padding-left: 30rpx;
      color: #7A7A7A;
      font-size: 24rpx;
      display: flex;
      flex-direction: column;
      > text:nth-child(2) {
        color: white;
        font-size: 29rpx;
      }
    }
  }
  
  .my_input_list {
    margin: 3% 0 0 5%;
    width: 80%;
    display: flex;
    flex-direction: column;
    >view:nth-child(1) {
      position: relative;
      align-items: center;
      width: 100%;
      height: 50rpx;
      color: white;
      font-size: 28rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
  
      >image {
        position: relative;
        z-index: 30;
        top: 5rpx;
        width: 40rpx;
        height: 40rpx;
      }
  
      >text {
        color: white;
      }
  
      >text:nth-child(1) {
        font-size: 29rpx;
        margin-left: 20rpx;
        color: #25FCB9;
      }
    }
    > view:nth-child(2){
      position: relative;
      align-items: center;
      width: 100%;
      height: 50rpx;
      color: #7A7A7A;
      font-size: 24rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-left: 20rpx;
    }
  }
</style>
